
<template>
<!-- template有且仅有一个 -->
    <div>
        <h1>App根组件</h1>
        <foo></foo>
        <span>{{msg}}</span>
    </div>
</template>

<script>
//使用某个组件，先要进行导入
import Foo from "./commponets/Foo.vue"
//导出一个默认的成员对象 他就是当前组件对象
export default {
    // 导出默认成员有且仅有一个
    data() {
        return {
            msg:"陈大可",
        }
    },
    //引用子组件
    components:{
        Foo:Foo,
    }
}
</script>
<style scoped>
/*scoped的作用就是限制样式仅在当前组件中生效，不然会传递到其他父子组件*/
    h1{
        color:red
    }
</style>